<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      h1 {text-align:center;}
      h2 {text-align:left;}
      div.author {text-align:center;}
      div.name {text-align:right;}
      div.affiliation {text-align:right;font-size:60%;}
      div.fig {text-align:center; margin:30px auto 30px auto;}
      math {white-space: nowrap; margin:20px;}
      div.caption{font: caption;font-weight: bold;font-size: 70%;margin-top:10px;text-align:center; }
      .test {margin:10px auto 10px auto; }
      .source {font-size: 70%;text-align:left;font-family: monospace;background: white;width:80%;padding-left:1em;margin-left:auto;margin-right:auto;border-style:dotted;border-width:1px; }
      .none {border:none;background: none;margin:0;padding:0; }
      table {border-style:solid;border-spacing:0;border-width:1px 0 0 1px;text-align:center;background:white;margin-left:auto;margin-right:auto;}
      th{background:#444444;color:white;padding:3px 10px;border-style:solid;border-width: 0 1px 1px 0;border-color:black;}
      td{border-style:solid;padding:0 10px;border-width:0 1px 1px 0;text-align:left;}
      div.slide{margin-bottom:100px;margin-left:auto;margin-right:auto;}
      .note{margin:10px;border:dotted 1px;background:white;font-size:0px;visibility:hidden;}
      div.slide_cover{margin-bottom:100px;}
      ul.i0 {list-style-image:url(./../img/item/darkball_blue24.png); }
      ul.i1 {list-style-image:url(./../img/item/darkball_red24.png); }
      ul.i2 {list-style-image:url(./../img/item/darkball_yellow24.png); }
      ul.i3 {list-style-image:url(./../img/item/darkball_pink24.png); }
      ul.i4 {list-style-image:url(./../img/item/darkball_black24.png); }
      ul.i5 {list-style-image:url(./../img/item/darkball_green24.png); }
      a:link {text-decoration:none }
      a:active {text-decoration:none }
      a:visited {text-decoration:none }
      html{width:100%; height:100%; margin:0; }
      body{width:100%; height:100%; margin:0 auto 400px auto; background:#cccccc; }
      .control-button {text-align:center;font-family:arial;font-size:13px;font-weight:bold;background:#aaaaaa;margin:1px;padding:0px 2px;border:solid 1px gray;cursor:pointer;}
    </style>

    <title>Video</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="./videoPlayer.js"></script>
    <script type="text/javascript" src="./videoInformation.js"></script>
    <script type="text/javascript">
      /*<!--*/
      
      //-->
    </script>
  </head>
  <body
     onload="setFrame(0);"
     style="margin:auto;"
     onmousemove="x=event.pageX;y=event.pageY;if(down_flag) { draggedHandleTo(x,y); };lastx=x;lasty=y;return true;">

    <div style="margin:60px;">
      <div class="test" style="margin:0px;">
	<table id="video-player" class="none" style="border:solid 1px gray;">
	  <tr>
	    <td class="none">
	      <img id="target" src="" alt="Video"/>
	    </td>
	  </tr>
	  <tr>
	    <td class="none">
	      <table class="none">
		<tr>
		  <td class="none">
 		    <div class="control-button" onclick="prev();">&lt;</div>
 		  </td>
 		  <td class="none">
 		    <div id="play-button" style="width:35px;" class="control-button" onclick="switchPlayStop();">play</div>
 		  </td>
		  <td class="none">
 		    <div class="control-button" onclick="next();">&gt;</div>
 		  </td>
                  <td class="none">
 		    <div class="control-button" onclick="switchPlaySpeed();">s</div>
                  </td>
		  <td class="none" style="width:100%;">
 		    <div id="progress-back" onmouseup="down_flag=false;" onmouseexit="down_flag=false;" style="height:4px;border:solid 1px gray;margin:5px;">
 		      <div id="progress" style="margin:-1;border:solid 1px gray;height:100%;width:0;background:red;">
 			<div id="progress-handle" style="cursor:pointer;border:solid 0px;;height:10px;width:10px;margin:-7px 0px auto auto;" onmousedown="down_flag=true; down_x=event.pageX; down_counter=counter;down_y=event.pageY;">
 			  <img src="./handle.png" width="18px" height="18px" alt=""/>
 			</div>
 		      </div>
 		    </div>
 		  </td>
 		  <td class="none">
		    <div id="count_number" style="background:white;border:solid 1px gray;margin:1px;width:30px;padding:0px;font-family:arial;font-weight:bold;Arial;font-size:13px;text-align:right;">
		      [ ]</div>
 		  </td>
		</tr>
	      </table>
	    </td>
	  </tr>
	</table>
      </div>
    </div>
  </body>
 </html>
